<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <div class="stat-card">
            <div class="stat-value">{{ kanbanData.todayProduction || 0 }}</div>
            <div class="stat-label">今日产量</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-card">
            <div class="stat-value">{{ kanbanData.runningOrders || 0 }}</div>
            <div class="stat-label">生产中工单</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-card">
            <div class="stat-value">{{ kanbanData.pendingOrders || 0 }}</div>
            <div class="stat-label">待生产工单</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="stat-card">
            <div class="stat-value">{{ kanbanData.completedOrders || 0 }}</div>
            <div class="stat-label">已完成工单</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>进行中工单</span>
          </template>
          <el-table :data="kanbanData.runningOrdersList" style="width: 100%">
            <el-table-column prop="workOrderNo" label="工单号" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="planQuantity" label="计划数量" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>待生产工单</span>
          </template>
          <el-table :data="kanbanData.pendingOrdersList" style="width: 100%">
            <el-table-column prop="workOrderNo" label="工单号" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="planQuantity" label="计划数量" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getKanbanData } from '@/utils/api'

const kanbanData = ref({
  todayProduction: 0,
  runningOrders: 0,
  pendingOrders: 0,
  completedOrders: 0,
  runningOrdersList: [],
  pendingOrdersList: []
})

const loadData = async () => {
  try {
    const res = await getKanbanData()
    kanbanData.value = res.data
  } catch (error) {
    console.error('加载数据失败:', error)
  }
}

onMounted(() => {
  loadData()
  // 每30秒刷新一次数据
  setInterval(loadData, 30000)
})
</script>

<style scoped>
.stat-card {
  text-align: center;
  padding: 20px;
}

.stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-top: 10px;
}
</style>
